/**
 * 炼焦大数据智能诊断系统 - 架构图JavaScript文件
 */

// 页面加载完成后执行
document.addEventListener('DOMContentLoaded', function() {
    // 显示加载动画
    createLoadingSpinner('architecture-diagram');
    
    // 生成架构图
    setTimeout(() => {
        renderArchitectureDiagram();
    }, 500);
});

/**
 * 渲染系统架构图
 */
function renderArchitectureDiagram() {
    const container = document.getElementById('architecture-diagram');
    if (!container) return;
    
    // 使用Mermaid绘制架构图
    const diagram = `
    <div class="mermaid">
    flowchart TB
        subgraph 数据源
            DS1[炼焦生产系统]
            DS2[实验室数据]
            DS3[设备监测数据]
            DS4[历史数据库]
        end
        
        subgraph 数据采集层
            DC1[数据采集接口]
            DC2[数据质量检测]
            DC3[自动采集脚本]
        end
        
        subgraph 数据处理层
            DP1[数据清洗]
            DP2[异常值处理]
            DP3[特征工程]
            DP4[数据存储管理]
        end
        
        subgraph 分析建模层
            AM1[统计分析模型]
            AM2[机器学习模型]
            AM3[深度学习模型]
            AM4[多目标优化]
        end
        
        subgraph 应用服务层
            AS1[焦炭质量预测]
            AS2[异常工况诊断]
            AS3[工艺参数优化]
            AS4[寿命周期分析]
        end
        
        subgraph 展示交互层
            UI1[可视化仪表盘]
            UI2[报告生成系统]
            UI3[预警通知]
            UI4[决策支持]
        end
        
        DS1 --> DC1
        DS2 --> DC1
        DS3 --> DC1
        DS4 --> DC1
        
        DC1 --> DC2
        DC2 --> DC3
        DC3 --> DP1
        
        DP1 --> DP2
        DP2 --> DP3
        DP3 --> DP4
        DP4 --> AM1
        
        AM1 --> AM2
        AM2 --> AM3
        AM3 --> AM4
        
        AM1 --> AS1
        AM2 --> AS2
        AM3 --> AS3
        AM4 --> AS4
        
        AS1 --> UI1
        AS2 --> UI2
        AS3 --> UI3
        AS4 --> UI4
        
        classDef dataSource fill:#e1f5fe,stroke:#01579b,stroke-width:2px
        classDef dataCollection fill:#e8f5e9,stroke:#2e7d32,stroke-width:2px
        classDef dataProcessing fill:#f9fbe7,stroke:#827717,stroke-width:2px
        classDef analysisModeling fill:#fff3e0,stroke:#e65100,stroke-width:2px
        classDef applicationService fill:#fce4ec,stroke:#880e4f,stroke-width:2px
        classDef userInterface fill:#e8eaf6,stroke:#1a237e,stroke-width:2px
        
        class DS1,DS2,DS3,DS4 dataSource
        class DC1,DC2,DC3 dataCollection
        class DP1,DP2,DP3,DP4 dataProcessing
        class AM1,AM2,AM3,AM4 analysisModeling
        class AS1,AS2,AS3,AS4 applicationService
        class UI1,UI2,UI3,UI4 userInterface
    </div>
    `;
    
    // 设置容器内容
    container.innerHTML = diagram;
    
    // 重新渲染Mermaid图表
    mermaid.init(undefined, container.querySelector('.mermaid'));
    
    // 添加交互效果
    setTimeout(addArchitectureInteractions, 1000);
}

/**
 * 为架构图添加交互效果
 */
function addArchitectureInteractions() {
    // 获取所有架构图中的节点
    const nodes = document.querySelectorAll('#architecture-diagram .node');
    
    nodes.forEach(node => {
        // 添加鼠标悬停效果
        node.addEventListener('mouseover', function() {
            this.style.cursor = 'pointer';
            this.querySelector('rect, circle, ellipse').setAttribute('stroke-width', '3px');
        });
        
        node.addEventListener('mouseout', function() {
            this.querySelector('rect, circle, ellipse').setAttribute('stroke-width', '2px');
        });
        
        // 添加点击事件
        node.addEventListener('click', function() {
            const nodeId = this.id;
            const nodeText = this.querySelector('text').textContent.trim();
            
            showNodeDetails(nodeId, nodeText);
        });
    });
}

/**
 * 显示节点详细信息
 * @param {string} nodeId - 节点ID
 * @param {string} nodeText - 节点文本
 */
function showNodeDetails(nodeId, nodeText) {
    // 根据节点类型显示不同的详细信息
    let details = '';
    
    // 数据清洗节点
    if (nodeText === '数据清洗') {
        details = `
            <h5>数据清洗</h5>
            <p>处理缺失值、异常值和数据格式标准化</p>
            <ul>
                <li>KNN插值填充缺失值</li>
                <li>IQR和Z-Score异常值检测</li>
                <li>时间序列数据平滑处理</li>
            </ul>
        `;
    } 
    // 特征工程节点
    else if (nodeText === '特征工程') {
        details = `
            <h5>特征工程</h5>
            <p>提取和构建有价值的特征</p>
            <ul>
                <li>炼焦过程关键参数提取</li>
                <li>时间特征构建（结焦周期、季节性）</li>
                <li>温度曲线特征提取</li>
                <li>多源数据融合预处理</li>
            </ul>
        `;
    }
    // 机器学习模型节点
    else if (nodeText === '机器学习模型') {
        details = `
            <h5>机器学习模型</h5>
            <p>应用机器学习算法进行预测和分类</p>
            <ul>
                <li>焦炭质量分类模型（随机森林、XGBoost）</li>
                <li>结焦周期最优推焦时间预测</li>
                <li>能耗异常检测模型</li>
                <li>炉况模式聚类分析</li>
            </ul>
        `;
    }
    // 深度学习模型节点
    else if (nodeText === '深度学习模型') {
        details = `
            <h5>深度学习模型</h5>
            <p>应用深度学习技术处理复杂数据</p>
            <ul>
                <li>温度曲线预测LSTM模型</li>
                <li>自编码器异常检测模型</li>
                <li>温度曲线卷积神经网络特征提取</li>
            </ul>
        `;
    }
    // 默认信息
    else {
        details = `
            <h5>${nodeText}</h5>
            <p>炼焦大数据智能诊断系统的重要组成部分</p>
        `;
    }
    
    // 创建模态框显示详细信息
    const modalId = 'nodeDetailModal';
    let modal = document.getElementById(modalId);
    
    // 如果模态框不存在，则创建
    if (!modal) {
        const modalDiv = document.createElement('div');
        modalDiv.innerHTML = `
            <div class="modal fade" id="${modalId}" tabindex="-1" aria-hidden="true">
                <div class="modal-dialog">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h5 class="modal-title">节点详情</h5>
                            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                        </div>
                        <div class="modal-body" id="${modalId}-body">
                        </div>
                    </div>
                </div>
            </div>
        `;
        document.body.appendChild(modalDiv);
        modal = document.getElementById(modalId);
    }
    
    // 设置模态框内容
    document.getElementById(`${modalId}-body`).innerHTML = details;
    
    // 显示模态框
    const bsModal = new bootstrap.Modal(modal);
    bsModal.show();
} 